<template>
	<div class="swipeBox" :style="{paddingBottom:showBar?'50px':''}">
		<div class="swipe">
			<van-swipe class="banner" :autoplay="3000" indicator-color="red">
			  <van-swipe-item v-for="(item,index) in bannerList" :key="index">
				  <img :src="item.imageUrl" alt="">
			  </van-swipe-item>
			</van-swipe>
		</div>
		
		<div class="songlistBox">
			<div class="songlist">
				<p>推荐歌单</p>
			</div>
			<van-grid :border="false" :column-num="3">
			  <van-grid-item v-for="(item,index) in songList" :key="index">
				<div class="textBox" @click="Tolist(item.id)">
					<van-image :src="item.picUrl" />
					<p>{{item.name}}</p>
				</div>
			  </van-grid-item>
			</van-grid>
		</div>
		
		<div class="newSongBox">
			<div class="newSong">
				<p>最新音乐</p>
			</div>
			<div class="newSongList">
				<div class="songListBox" v-for="(item,index) in newSong"  @click="songId(item.id,index)">
					<div class="songNameBox">
						<p>{{item.song.name}}</p>
						<p>{{item.song.artists[0].name}} - {{item.song.album.name}}</p>
					</div>
					<div class="iconBox">
						<i class="iconfont" :class="playingIndex==index? 'icon-zanting':'icon-bofang'"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入接口api文件
	import api from '../../js/api.js'
	export default {
		data(){
			return{
				bannerList:[],
				songList:[],
				newSong:[],
				playList:[]
			}
		},
		methods:{
			Tolist(id){
				this.$router.push({name:'list',params:{songid:id}})
			},
			songId(id,index){
				let audioSrc = `https://music.163.com/song/media/outer/url?id=${id}.mp3`
				this.audio.transmit(audioSrc)
				
				this.axios({
					url:'/song/detail'+`?ids=${id}`
				}).then(res=>{
					console.log(res.data.songs)
					this.$store.commit("setCurrentSong",res.data.songs[0])
				})
				this.$store.commit("playListState",this.playList)
				this.$store.commit("setPlayingIndex",index)
			}
		},
		created(){
			this.axios({
				// 使用对应接口
				url:api.banner
			}).then(res=>{
				this.bannerList = res.data.banners
				window.console.log(res)
			});
			
			this.axios({
				// 使用对应接口'
				url:'personalized?limit=6'
			}).then(res=>{
				this.songList = res.data.result	
				// window.console.log(this.songList)
			});
			
			this.axios({
				// 使用对应接口'
				url:'personalized/newsong'
			}).then(res=>{
				this.newSong = res.data.result
				this.playList = res.data.result.map(e=>e.id)
				window.console.log(res)
			});
		},
		computed:{
			showBar(){
				return this.$store.state.currentSong.al.id
			},
			playingIndex(){
				return this.$store.state.playingIndex
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swipe{
		padding: 10px 15px 10px 15px;
		.banner{
			width: 100%;
			height: 156px;
			border-radius: 5px;
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.songlistBox{
		padding-top: 14px;
		.songlist{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 10px;
			border-left: 2px solid red;
		}
		.textBox{
			text-align: left;
			>p{
				width: 99px;
				height: 30px;
				overflow: hidden;
				font-size: 12px;
			}
		}
	}
	.newSongBox{
		padding-top: 24px;
		.newSong{
			text-align: left;
			padding-left: 10px;
			border-left: 2px solid red;
			margin-bottom: 14px;
		}
		.newSongList{
			padding-left: 10px;
			.songListBox{
				text-align: left;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f9f9fa;
				.songNameBox{
					>p{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: normal;
					}
					>p:first-child{
						padding-top: 6px;
						font-size: 17px;
					}
					>p:last-child{
						padding-bottom: 6px;
						font-size: 12px;
						color: #888;
					}
				}
				.iconBox{
					padding: 0 10px;
					>i{
						font-size: 22px;
						color: gray;
					}
				}
			}
		}
	}
</style>
